<template>

  <div class="classroom">

    <div class="main">
      <h3 class="title mb20">
        <span class="t">网上课堂</span>
      </h3>
      <div class="classroom-warp">
        <section @click="w">
          <img :src="img1" alt="">
          <p>工程建设云个人小程序使用教学</p>
        </section>
        <section @click="w">
          <img :src="img2" alt="">
          <p>资质申报业务平台教学</p>
        </section>
        <section @click="w">
          <img :src="img1" alt="">
          <p>新版项目管理平台教学培训</p>
        </section>
      </div>
    </div>


  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted} from 'vue';
import img1 from '/src/assets/img/temporary1.png'
import img2 from '/src/assets/img/temporary2.png'
import { message } from "ant-design-vue";
export default defineComponent({
  name: 'classroom',
  components: { },

  setup() {

    const init = () => {
    }

    const w = () =>{
      message.info('网上课堂视频暂未上线')
    }
    onMounted(init);

    return { img1, img2 , w}
  }
})
</script>

<style lang="less" scoped>
.classroom{
  padding: 40px 0;
  background: #fff;

  .title{
    border-bottom: 1px solid #E0E5EB;

    span.t{
      display: inline-block;
      padding-bottom: 10px;
      font-size: 20px;
      line-height: 28px;
      border-bottom: 3px solid #CD1922 ;
    }

    a{
      float: right;
      font-size: 14px;
      transform: translateY(8px);

      .anticon{
        font-size: 14px;
      }
    }
  }

  .classroom-warp{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    >section{
      width: 384px;
      margin-bottom: 10px;

      img{
        display: block;
      }

      p{
        padding: 10px 0;
        margin: 0;
      }
    }
  }
}

</style>
